<template>
  <div class="content-category">
    <grid-view :cols="3" :line-space="15"  v-if="subList">
      <div class="item" v-for="(item, i) in subList" :key="i">
        <img class="item-img" src="~assets/img/common/placeholder.png" alt="">
        <div class="item-text">{{item.name}}</div>
      </div>
    </grid-view>
  </div>
</template>

<script>
  import GridView from 'components/common/gridView/GridView'

  export default {
    name: 'TabContentCategory',
    components: {
      GridView
    },
    props: {
      subList: {
        type: Array,
        default: []
      }
    }
  }
</script>

<style scoped>
  .content-category {
    /* width: calc(100% - 100px); */
    padding: 15px 0;
  }

  .item {
    text-align: center;
    font-size: 12px;
  }

  .item-img {
    width: 70px;
  }

  .item-text {
    margin-top: 5px;
  }
</style>